<template>
  <div class="image-slider">
    <swiper
      :slides-per-view="slidesPerView"
      :space-between="30"
      :pagination="{ clickable: true }"
     
    >
      <swiper-slide v-for="(slide, index) in slides" :key="index" class="slide">
        <img :src="slide.image" alt="Slide Image" class="slide-image" />
        <p class="slide-text">{{ slide.text?slide.text:'' }}</p>
      </swiper-slide>
      <!-- <template #navigation-prev>
        <button class="swiper-button-prev"></button>
      </template>
      <template #navigation-next>
        <button class="swiper-button-next"></button>
      </template> -->
    </swiper>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import 'swiper/swiper-bundle.css';
const {sliders,slidesPerView}=defineProps({
  slides:{
    type:Array,
    required:true
  },
  slidesPerView:{
    type:String,
    default: '6' 
  }
})
// const slides = ref([
//   { image: '/assets/images/huangshan.png', text: '纪念“黄山谈话”30周年系列活动' },
//   { image: '/assets/images/huangshan2.png',text: '纪念“黄山谈话”30周年系列活动'},
//   { image: '/assets/images/glg.png', text: 'GLG农产品深加工高科产业园首批设备运抵' },
//   { image: '/assets/images/huaibei2.png', text: '淮北参观学习' },
//   { image: '/assets/images/glg2.png', text: 'GLG农产品深加工高科产业园首批设备运抵' },
//   { image: '/assets/images/leader.png', text: '全国工商联、农业部、安徽省工商联领导' },
//   { image: '/assets/images/huaibei3.png', text: '淮北参观学习' },
//   { image: '/assets/images/huaibei4.png', text: '淮北参观学习' },
// ]);
</script>

<style scoped>
.image-slider {
  width: 100%;
  max-width: 55vw;
  margin: 0 auto;
  /* margin-left: 5vw; */
  position: relative;
}

.slide {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.slide-image {
  width: 100%;
  height: auto;
  display: block;
}

.slide-text {
  margin-top: 10px;
  font-size: 16px;
  text-align: center;
}

/* Swiper navigation buttons */
.swiper-button-prev,
.swiper-button-next {
  color: #000; /* Change color as needed */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.swiper-button-prev {
  left: 10px;
}

.swiper-button-next {
  right: 10px;
}
</style>
